<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const show = ref(false);
// 返回
const onClickLeft = () => history.back();

const dialog = () => {
  show.value = true;
};
</script>

<template>
  <div>
    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      title="设置"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <van-cell title="头像" is-link />
      <van-cell title="修改昵称" value="小小" @click="dialog" is-link />
      <van-cell to="/xgsjh" title="手机号" value="" is-link />
      <van-cell to="/xgmm" title="修改密码" value="" is-link />
      <van-cell to="/tssz" title="推送设置" value="" is-link />
      <van-cell title="清除缓存" value="12M" is-link />
    </div>
    <van-popup
      :style="{
        height: '30%',
        width: '300px',
        padding: '20px',
        lineHeight: '29px',
      }"
      v-model:show="show"
    >
      <div>修改昵称</div>
      <van-cell-group inset>
        <van-field v-model="value" :style="{border: '1px solid #ccc',margin:'10px 0'  }" label="" placeholder="请输入用户名" />
      </van-cell-group>
      <div class="ann">
        <van-button type="success">确定</van-button>
        <van-button type="primary">取消</van-button>
      </div>
    </van-popup>
  </div>
</template>



<style  scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  
}

.ann {
    display: flex;
    justify-content: space-between;
    width: 200px;
}
</style>